<template>
  <div id="projectDecom">
    <!-- 顶部按钮区 -->
    <el-row class="top">
      <el-col :span="24">
        <!-- <el-button type="primary"
        class="company-logo-btn">同步wbs</el-button>-->
        <!-- <el-button type="primary">关联构件</el-button> -->
        <el-button type="primary" class="company-logo-btn" @click="downLoad">下载模板</el-button>
        <!-- <el-col :span='3'> -->
        <el-upload
          class="company-logo-upload"
          action
          ref="uploadFile"
          :show-file-list="false"
          :disabled="uploadProjectId===0"
          :http-request="uploadCreditImg"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-upload="beforeUpload"
          :before-remove="beforeRemove"
          multiple
          :limit="1"
          :data="creditImg"
          accept=".xls, .xlsx"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button type="primary">导入模板</el-button>
        </el-upload>
        <el-button
          type="primary"
          v-auth="'init-design-btn'"
          class="init-design-wbs"
          @click="onInitWBSDesign"
        >初始化设计方WBS</el-button>
      </el-col>
      <!-- </el-col> -->
    </el-row>
    <!-- 内容区 -->
    <el-row class="content">
      <el-col :span="6" class="model-left">
        <ProjectTree :curMenu.sync="menuNo" :curId.sync="projectId" @ids="getId"></ProjectTree>
      </el-col>
      <el-col :span="18" class="chart-resolve">
        <el-row class="chart-resolve-row">
          <el-col :span="24" class="chart-resolve-col">
            <el-col :span="9" align="right" style="float:right">
              <ul type="flex" flex-direction="row" justify-content="space-around"></ul>
            </el-col>
            <ProjectChartComp :p_index="pIndex" :chartId="chartId"></ProjectChartComp>
          </el-col>
        </el-row>
        <GeneralAuthItemPopUpDialog
          v-if="geneAuthItemPopUpDialog==true"
          :objRowGeneral.sync="objRowGeneral"
          :currentPageName.sync="currentPageName"
          :geneAuthItemPopUpDialog.sync="geneAuthItemPopUpDialog"
        ></GeneralAuthItemPopUpDialog>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import GeneralAuthItemPopUpDialog from "@/components/GeneralAuthItemPopUpDialog/GeneralAuthItemPopUpDialog";
import { menuManageApi, permissionManageApi } from "@/services/SystemSetting";
import { projectDecomApi, ProjectListApi } from "@/services/ProjectCenter";
import { standardCodeApi } from "@/services/StandardCode";
import ProjectTree from "../../ProjectCenter/ProjectDecom/projectTree";
import ProjectChartComp from "../../ProjectCenter/ProjectDecom/projectChartComp";
export default {
  components: {
    ProjectTree,
    ProjectChartComp,
    GeneralAuthItemPopUpDialog
  },
  data() {
    return {
      isLookDataAuth: false, //是否有权限，true：是，false：否
      geneAuthItemPopUpDialog: false,
      currentPageName: "项目分解", //当前页面的名称
      objRowGeneral: {},
      creditImg: {},
      pIndex: "1",
      menuNo: {},
      requestParam: {
        page: 1,
        per_page: 10
      },
      projectId: {},
      projectDecom: {
        list: [],
        total_count: 0
      },
      wbs_id: "",
      project_id: "",
      component_no: "", // 构件编号
      memberType: [], // 构件类型数组
      // 图表部分数据
      layerArr: [], //
      areaArr: [], // 区域数组
      objstyle: [],
      current: "",
      fileList: [],
      modelShow: true,
      modelUrl: "",
      rankShow: false,
      modelVisible: false,
      chartId: 0,
      uploadProjectId: 0
    };
  },
  watch: {
    objRowGeneral: {
      handler(n, o) {
        if (n.project_id) {
          this.checkCurrentProIsAuth(n.project_id, n.object_id); //检查当前项目是否有权限
        }
      },
      deep: true
    },
    projectId: {
      handler(newval) {
        this.uploadProjectId = newval;
        this.chartId = newval;
      },
      deep: true
    },
    menuNo: {
      handler(newval) {},
      deep: true
    }
  },
  methods: {
    onCoverCurrentWbs() {
      //覆盖当前Wbs
      projectDecomApi
        .coverWbs({
          data: {
            project_id: this.projectId //当前项目的主键值
          }
        })
        .then(res => {
          if (res.code == 0) {
            this.$message.success("操作成功");
            window.location.reload();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    onInitWBSDesign() {
      //初始化设计方WBS
      this.$confirm("是否覆盖当前wbs?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        left: true
      })
        .then(() => {
          this.onCoverCurrentWbs(); //覆盖当前wbs
        })
        .catch(() => {
          this.$message.info("已取消操作");
        });
    },
    noAuthFunc() {
      //无权限
      this.$alert(
        "该页面数据未被授权,暂时无法查看项目数据,请申请授权.",
        "提示",
        {
          dangerouslyUseHTMLString: true
        }
      );
    },
    checkCurrentProIsAuth(proId, objId) {
      ProjectListApi.checkCurrentProIsAuth({
        params: {
          project_id: proId, //项目id
          object_id: objId //权限项id
        }
      })
        .then(res => {
          if (res.data) {
            this.isLookDataAuth = res.data.check_power;
            if (this.isLookDataAuth == true) {
              //有权限
              this.uploadProjectId = proId;
              this.chartId = proId;
              this.getType(); //数据渲染
            } else {
              //无权限
              this.noAuthFunc();
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 下载模板
    downLoad() {
      // projectDecomApi.downLoadModel({
      // }).then(res => {
      //   if (res.code === 0) {
      //     var alink = document.createElement('a')
      //     alink.href = res.data.wbsTemplateUrl
      //     alink.download = ''
      //     alink.click()
      //   }
      // })
      var alink = document.createElement("a");
      alink.href =
        "//release-console-new.oss-cn-hangzhou.aliyuncs.com/ggzx/company/file/wbsResolve.xls";
      // alink.href = 'http://hibuilding-new.oss-cn-hangzhou.aliyuncs.com/upload/images/app/201910/wbsResolve.xls'
      alink.download = "";
      alink.click();
    },
    // 上传前验证类型
    beforeUpload(file) {
      // const isXLS = file.type === 'application/xls'
      // const isXLSX = file.type === 'application/xlsx'
      // const isExcel =
      //   file.type ===
      //   'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      // console.log('上传文件file=', file, 'isxls=', isXLS, 'isxlsx=', isXLSX, 'isExcel=', isExcel)
      // if (!isXLS && !isXLSX && !isExcel) {
      //   this.$message.error('上传文件必须是XLS/XLSX 格式!')
      // }
      // return isXLSX || isXLS || isExcel
    },
    // 导入模板
    uploadCreditImg(file) {
      let formData = new FormData();
      formData.append("project_id", this.uploadProjectId);
      formData.append("wbs_file", file.file);
      projectDecomApi
        .uploadModel({
          data: formData
        })
        .then(res => {
          if (res.code === 0) {
            this.$message.success("导入成功");
            window.location.reload();
          } else {
            // 导入失败清空上传列表
            this.$refs.uploadFile.clearFiles();
          }
        });
    },
    handlePreview() {},
    handleRemove() {},
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    // 获取id
    getId(data) {
      this.wbs_id = data.wbs_id;
      this.project_id = data.project_id;
      this.getData();
      this.getModelList();
    },
    // 获取模型
    getModelList() {
      projectDecomApi
        .getModel({
          params: {
            wbs_id: this.wbs_id
          }
        })
        .then(res => {
          if (res.data.length != 0) {
            if (res.data[0].attach_detail != "") {
              this.modelShow = false;
              this.rankShow = true;
              this.modelUrl = res.data[0].attach_detail;
            } else {
              this.modelShow = true;
              this.modelUrl = "";
              this.rankShow = false;
            }
          } else {
            this.modelShow = true;
            this.modelUrl = "";
            this.rankShow = false;
          }
        });
    },
    // 获取构件列表数据
    getData() {
      projectDecomApi
        .getMemberList({
          params: {
            project_id: this.project_id,
            wbs_id: this.wbs_id,
            component_no: this.component_no,
            page: this.requestParam.page,
            per_page: this.requestParam.per_page
          }
        })
        .then(res => {
          this.projectDecom.list = res.data.data;
          this.projectDecom.total_count = res.data.total;
          for (var i = 0; i < this.projectDecom.list.length; i++) {
            for (var j = 0; j < this.memberType.length; j++) {
              if (
                this.projectDecom.list[i].component_type ===
                this.memberType[j].value
              ) {
                this.projectDecom.list[i].component_name = this.memberType[
                  j
                ].name;
              }
            }
          }
        });
    },
    // 获取构件类型
    getType() {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "component_type"
          }
        })
        .then(res => {
          this.memberType = res.data.list;
        });
    },
    // 分页
    handlePageChange(page) {
      this.requestParam.page = page;
      this.getData();
    },
    // 查询
    search() {
      this.requestParam.page = 1;
      this.handlePageChange(this.requestParam.page);
    },
    // 查看功能
    memberInfo(row) {
      this.$router.push({ path: "/memberInfo", query: { id: row.cp_id } });
    },
    // 获取树形数据
    // getTreeData () {
    //   projectDecomApi.getTreeData({
    //     params: {
    //       project_id: '1'
    //     }
    //   }).then(res => {
    //     if (res.code === 0) {
    //       this.menuTree = res.data.wbs
    //       this.$store.dispatch('setMenuTree', this.menuTree)
    //       window.localStorage.setItem('menuTree', JSON.stringify(this.menuTree))
    //     }
    //   })
    // },
    // tab切换
    tabsChange(data) {
      if (data.index === "1") {
        this.pIndex = "1";
      } else {
        this.pIndex = "0";
      }
    },
    // <-----------------------图表部分分割线-------------------------->
    oncup() {},
    // 鼠标滑过“楼层”触发的事件
    onp(id, point) {},
    onchangesj() {},
    isReledProjectFunc() {
      //判断是否有已关联的项目
      let list = this.$store.state.choosedProjectList.list;
      let judgeIsRelPro = false;
      if (list.length > 0) {
        list.map(item => {
          if (item.custom_project_type == 2) {
            //已关联的项目
            judgeIsRelPro = true;
          }
        });
      }
      return judgeIsRelPro;
    }
  },
  created() {
    let isReledProject = this.isReledProjectFunc(); //判断是否有已关联的项目
    if (isReledProject == false) {
      //不存在关联的项目
      this.getType(); //数据渲染
    } else {
      //存在关联的项目
      this.objRowGeneral = {}; //重置
      this.geneAuthItemPopUpDialog = true;
    }
  },
  mounted() {
    // this.getTreeData()
  }
};
</script>
<style lang="scss" scoped>
#projectDecom {
  padding: 20px;
  position: relative;
  height: 100%;
  .top {
    height: 40px;
  }
  .content {
    position: absolute;
    top: 60px;
    bottom: 0;
    height: 90%;
  }
  .menu-tree-container {
    width: 100%;
    height: 100%;
  }
  .company-logo-btn {
    float: left;
    display: block;
  }
  .company-logo-upload {
    float: left;
    margin-left: 10px;
  }
  .model-left {
    height: 100%;
    padding-top: 20px;
    border-right: 1px solid #ccc;
  }
  .chart-resolve {
    height: 100%;
    .chart-resolve-row {
      min-height: 590px;
      height: 100%;
      .chart-resolve-col {
        height: 100%;
        min-height: 590px;
      }
    }
  }
  .model-top-row {
    margin-bottom: 10px;
    .model-left {
      border-right: 1px solid #ccc;
    }
    .model-right {
      padding: 0 20px;
      position: relative;
    }
  }
  .model-table {
    margin-bottom: 15px;
    .member-input {
      width: 20%;
    }
  }
  .model-table-mid {
    margin-bottom: 15px;
  }
  .table_tabs {
    /deep/ .el-tabs__nav {
      float: right;
    }
    /deep/ .el-tabs__nav-wrap::after {
      height: 0px;
    }
  }
}
.mid-size {
  height: 80;
}
.col-3-style {
  text-align: right;
  padding: 0px !important;
  padding-left: 12px !important;
}
.mid-left-desc {
  margin-top: 50px;
}
.head-installed-old {
  padding-left: 0px;
  padding-right: 0px;
  height: 16px;
}
.head-installed {
  padding-left: 0px;
  padding-right: 0px;
  height: 16px;
}
/deep/ .head-box {
  padding-left: 0px;
  padding-right: 0px;
  height: 16px;
}
.onp-div-next {
  height: 520;
}
.col-pagi-style {
  margin: 20px 0px;
  text-align: center;
}
.col-table-top {
  min-height: 310px;
  margin-top: 20px;
  overflow: auto;
}
.space-col {
  border-top: 1px solid #e6e6e6;
  padding-left: 20px;
}
.col-lh-top {
  width: auto;
}
.p-style {
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}
.onp-div {
  width: 1200px;
  margin-top: 42.5px;
}
.mid-right-slid {
  width: 1000px;
  height: auto;
  overflow: auto;
  box-shadow: -10px 10px 11px rgba(234, 237, 241, 1);
}
.no-install {
  background: rgba(234, 237, 241, 1);
  display: block;
  width: 16px;
  height: 16px;
}
/deep/ .no-install-next {
  font-size: 12px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  padding-right: 0px !important;
  color: rgba(128, 128, 128, 1);
  float: left;
  height: 16px;
  line-height: 16px;
}
.row-style {
  height: 100%;
  overflow: hidden;
}
.head-style {
  padding-right: 20px;
}
.mid-str-border {
  border-left: 1px solid #ececec;
}
.col-12-style {
  height: 49px;
  line-height: 40px;
}
.col-10-style {
  margin-top: 11px;
  float: right;
}
.col-install {
  background: rgba(250, 173, 20, 1);
  display: block;
  width: 16px;
  height: 16px;
}
/deep/ .col-install-next {
  font-size: 12px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(128, 128, 128, 1);
  float: left;
  height: 16px;
  padding-right: 0 !important;
  line-height: 16px;
}
.col-success {
  background: rgba(24, 144, 255, 1);
  display: block;
  width: 16px;
  height: 16px;
}
/deep/ .col-success-next {
  font-size: 12px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  padding-right: 0px !important;
  color: rgba(128, 128, 128, 1);
  float: left;
  height: 16px;
  line-height: 16px;
  padding-right: 0px;
}
.div-style {
  display: flex;
  flex-direction: row;
  width: 100%;
  // height: auto;
  margin-top: 15px;
  padding-left: 8px;
}
.div-style-next {
  width: 30px;
  height: auto;
  margin-right: 20px;
}
.div-ul {
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.div-ul-li {
  margin-top: 11.58px;
  margin-bottom: 1px;
  text-align: center;
  width: 100%;
  height: 20px;
  float: none;
  list-style: none;
}
.col-ul-li {
  float: left;
  width: 33.3%;
}
// /deep/ .el-pagination__jump {
//   height: 40px !important;
//   line-height: 40px !important;
// }
// /deep/ .el-pager li {
//   height: 40px !important;
//   line-height: 40px !important;
// }
// /deep/ .el-pagination__total {
//   height: 40px !important;
//   line-height: 40px !important;
// }
// /deep/ .el-pagination button:disabled {
//   height: 40px !important;
//   line-height: 40px !important;
// }
#projectDecom {
  .btnActive {
    border: 1px solid #000;
  }
  .mid-floor-tool {
    margin: 2px;
  }
  /deep/ .el-select .el-input__inner {
    cursor: pointer;
    // height: 40px !important;
    padding-right: 35px;
  }

  /deep/ .happy-scroll-container {
    height: auto !important;
  }
  /deep/ .happy-scroll-container {
    overflow: auto;
    width: 800px !important;
    height: auto !important;
  }
  #lh1 {
    li {
      float: left;
      list-style: none;
      width: 165px;
      border-top: 1px solid rgba(133, 133, 133, 1);
      height: 40px;
      text-align: center;
      line-height: 40px;
    }
  }
  .area-root {
    .area-root-li {
      float: left;
      list-style: none;
      height: 40px;
      margin-left: 5px;
      text-align: center;
      line-height: 40px;
      border-top: 1px solid rgba(50, 50, 50, 1);
    }
  }
  .mid-ul-back {
    transform: rotateX(180deg);
  }
  .mid-floor-size {
    li {
      margin-left: 5px;
      float: left;
      list-style: none;

      .mid-ul-size-more {
        text-align: center;
        li {
          margin-top: 10px;
          width: 80px;
          height: 20px;
          float: none;
          list-style: none;
          text-align: center;
          cursor: pointer;
        }
        li:active {
          border: 1px solid rgba(51, 51, 51, 1);
          width: 78px;
          height: 18px;
        }
      }
    }
  }
  .tree_num {
    li {
      margin-top: 10px !important;
      text-align: right;
      height: 20px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      line-height: 20px;
      font-size: 14px;
    }
  }
  .downla {
    position: relative;
    height: 312px;
    overflow: auto;
    /deep/
      .el-tree--highlight-current
      .el-tree-node.is-current
      > .el-tree-node__content {
      background-color: #e6f7ff;
    }
    /deep/ .el-tree-node__content:hover {
      background-color: #e6f7ff;
    }

    .mid-tree-style {
      font-size: 20px;
      position: absolute;
      top: 0px;
      z-index: 10;
      width: 100%;
    }
  }
  /deep/ .el-form-item {
    margin-bottom: 40px !important;
  }
}
.default-img {
  width: 160px;
  height: 160px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -80px;
  margin-top: -80px;
}
.default-title {
  position: absolute;
  top: 80%;
  left: 50%;
  margin-left: -77px;
  color: rgb(153, 153, 153);
}
.normal-i {
  font-size: 30px;
  position: absolute;
  right: 0;
  top: 0px;
  cursor: pointer;
  transform: rotate(45deg);
}
.model-dialog {
  /deep/ .el-dialog__header {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    /deep/ .el-dialog__title {
      color: #1443bb;
    }
  }
  /deep/ .el-icon-close {
    font-size: 30px;
  }
}
.init-design-wbs {
  margin-left: 12px !important;
}
</style>
